<template>
  <div id="app">
    <TodoHeader :title="appTitle" />
    
    <TodoInput @add-task="addTask" />
    
    <TodoFilters 
      :current-filter="filter" 
      @update:filter="filter = $event" 
    />
    
    <TodoList 
      :tasks="filteredTasks" 
      @toggle-task="toggleTaskStatus" 
      @delete-task="deleteTask" 
    />
    
    <TodoStats 
      :total="totalTasks" 
      :completed="completedCount" 
      :active="activeCount" 
    />

    <div class="nav-links">
      <router-link to="/" class="nav-link">返回首页</router-link>
      <router-link to="/about" class="nav-link">关于我</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import TodoHeader from '../components/TodoHeader.vue'
import TodoInput from '../components/TodoInput.vue'
import TodoFilters from '../components/TodoFilters.vue'
import TodoList from '../components/TodoList.vue'
import TodoStats from '../components/TodoStats.vue'

const appTitle = ref('我的待办事项')
const tasks = ref([])
const filter = ref('all')

onMounted(() => {
  const saved = localStorage.getItem('vue3-todo-tasks')
  if (saved) {
    tasks.value = JSON.parse(saved)
  }
})

watch(tasks, (val) => {
  localStorage.setItem('vue3-todo-tasks', JSON.stringify(val))
}, { deep: true })

const filteredTasks = computed(() => {
  if (filter.value === 'active') return tasks.value.filter(t => !t.completed)
  if (filter.value === 'completed') return tasks.value.filter(t => t.completed)
  return tasks.value
})

const totalTasks = computed(() => tasks.value.length)
const completedCount = computed(() => tasks.value.filter(t => t.completed).length)
const activeCount = computed(() => tasks.value.filter(t => !t.completed).length)

function addTask(text) {
  tasks.value.push({ id: Date.now(), text, completed: false })
}

function deleteTask(id) {
  tasks.value = tasks.value.filter(task => task.id !== id)
}

function toggleTaskStatus(id) {
  console.log('任务状态切换:', id)
  const taskIndex = tasks.value.findIndex(t => t.id === id)
  if (taskIndex !== -1) {
    // 创建新数组以确保响应式更新
    const updatedTasks = [...tasks.value]
    updatedTasks[taskIndex] = {
      ...updatedTasks[taskIndex],
      completed: !updatedTasks[taskIndex].completed
    }
    tasks.value = updatedTasks
    console.log('任务已更新:', updatedTasks[taskIndex])
  }
}
</script>

<style scoped>
#app {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  border-radius: 8px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 650px) {
  #app {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }
}

.nav-links {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.nav-link {
  margin: 0 10px;
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: #3aa876;
}
</style> 